<template>
  <div class="xmonitor">
    <div class="data-ctx" @click="monitordata" :style="{backgroundImage:'url('+borderBg+')'}">
      <p>
        <img src="@/assets/images/icon_monitor.png" alt style="margin-top: 8px;" />
      </p>
      <p>视频监控</p>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
       v-if="dialogVisible" v-dialogDrag
      class="jk-dialog xmonitor1"
      style="z-index:10000;"
    >
      <div id="h5videobox">
        <video
          style="height:600px"
          class="h5video"
          id="h5sVideo1"
          autoplay
          webkit-playsinline
          playsinline
        ></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import jkData from "./data.json";
let map;
export default {
  name: "xminitor",
  data() {
    return {
      borderBg: require("@/assets/images/bg_monitor.png"),
      icon: require("@/assets/images/icon_monitor.png"),
      dialogVisible: false,
      dialogTitle: "",
      token: "",
      v1: null,
      ifstart: false
    };
  },
  props: {
    newMap: {
      type: Object,
      default: {}
    }
  },
  mounted() {
    console.log(1111);
    console.log(this.newMap);
  },
  methods: {
    onClickHandle(type) {
      if (type === "warn") {
        return;
      }
      this.$emit("onClickHandle", type);
    },
    monitordata() {
      if (this.ifstart) {
        this.ifstart = false;
        this.removeMarker();
      } else {
        this.ifstart = true;
        this.addMapMarker();
      }
    },
    removeMarker() {
      console.log("clean");
      this.newMap.removeLayer("basemonitor");
      console.log(this.newMap.getLayer("basemonitor"));
    },
    addMapMarker(type, lng, lat, icon, device) {
      let that = this;
      var lay = this.newMap.addLayer({
        id: "basemonitor",
        type: "vector",
        events: {
          featureClick: function(f) {
            console.log("*********");
            console.log(f.attributes.features);
            that.dialogVisible = true;

            var obj = f.attributes.features;
            that.dialogTitle = obj[1];
            var conf1 = {
              videoid: "h5sVideo1",
              protocol: "http:", //http: or https:
              host: "192.168.15.232:5080", //localhost:8080
              rootpath: "/", // '/' or window.location.pathname
              token: "token" + obj[4],
              hlsver: "v1", //v1 is for ts, v2 is for fmp4
              session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
            };
            console.log("*********");

            that.$nextTick(() => {
              var v1;
              if (that.token == "") {
                //init
                that.token = obj[4];
                that.v1 = H5sPlayerCreate(conf1);
                that.v1.connect();
              }
              //切换摄像头
              let p = new Promise((res, rej) => {
                if (that.token != obj[4]) {
                  if (that.v1 != null) {
                    that.v1.disconnect();
                    that.v1 = null;
                    document.getElementById("h5sVideo1").remove();
                    document.getElementById("h5videobox").innerHTML =
                      '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
                    res();
                  }
                }
              });
              p.then(res => {
                that.v1 = H5sPlayerCreate(conf1);
                that.v1.connect();
              });
            });
          }
        }
      });


      var features = this.drawPointsByVideo(jkData, lay);
      // console.log(features);
      // jkLayer.addFeatures(features);
      // window.newMap.addLayer(jkLayer);
    },
    drawPointsByVideo(items, lay) {
      var x;
      var y;
      for (var i = 0; i < items.length; i++) {
        var o = JSON.parse(JSON.stringify(items[i]));
        var img =
          "";
        var style = {
          image: img,
          imageSize: [34, 76],
          imageCenter: ["C", "C"],
          imageOpacity: 1
        };

        var features = this.newMap.addFeatures(lay, "Point", [
          {
            x: o[2],
            y: o[3],
            features: o
          }
        ]);
        style = this.newMap.createStyle(style);
        features[0].setStyle(style);
      }
      return features;
    },
    getPointFeature(item, style) {
      console.log("item", item);
      var object = new OMAP.Geometry.Point(item.lon, item.lat);
      var typestr = "Point_" + item.id;
      var feature = new OMAP.Feature.Vector(object, item, style);
      feature.attributes.pid = typestr;
      return feature;
    }
  }
};
</script>

<style lang="less" scoped>
.xmonitor {
  width: 110px;
  height: 88px;
  position: absolute;
  bottom: 33px;
  left: 150px;
  z-index: 999;
  cursor: pointer;
  .data-ctx {
    height: 90px;
  }
  p {
    color: #72edf5;
    font-size: 14px;
  }
  p:nth-child(2) {
    margin-top: -7px;
  }

}
</style>
<style lang="">
.xmonitor1>.el-dialog{

    /* left: -300px; */

}
</style>
